<template>
  <div class="manual-mode-panel">
    <div class="tab-bar">
      <div
        v-for="tab in tabs"
        :key="tab"
        :class="['tab-item', { active: currentTab === tab }]"
        @click="onTabClick(tab)"
      >
        {{ tab }}
      </div>
    </div>
    <div class="tab-content">
      <router-view class="status-panel" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const tabs = [
  '卷帘门',
  '吸波墙(周围)',
  '工作台',
  '对中',
  '对中控制操作',
  'ACC操作',
  'ACCBack操作',
  'ACCAngle操作',
  'LDW1操作',
  'LDWBack1操作',
  'LDW2操作',
  '吸波墙(前)操作',
  '吸波墙(后)操作'
]
const currentTab = ref(route.params.tab ? String(route.params.tab) : tabs[0])

watch(
  () => route.params.tab,
  (newTab) => {
    if (typeof newTab === 'string' && tabs.includes(newTab)) {
      currentTab.value = newTab
    } else {
      currentTab.value = tabs[0]
    }
    console.log(currentTab.value)
  }
)
const onTabClick = (tab: string): void => {
  if (tab === '对中控制操作') {
    router.push(`/manual/${tab}/center`)
  } else {
    currentTab.value = tab
    router.push(`/manual/${tab}/comm`)
  }
}
</script>

<style scoped>
.manual-mode-panel {
  background: #f3f3f3;
  height: 100%;
  padding: 0;
}
.tab-bar {
  display: flex;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  overflow-x: auto;
  padding: 0 8px;
}
.tab-item {
  padding: 8px 16px;
  font-size: 12px;
  color: #2b4a6f;
  border: 1px solid #e5e5e5;
  border-bottom: none;
  background: #f7f7f7;
  margin-right: 4px;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
}
.tab-item.active {
  background: #e6ecf5;
  color: #fff;
  font-weight: bold;
  border-bottom: 2px solid #2b4a6f;
}
.tab-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 48px;
}
.status-panel {
  flex: 1;
  overflow: auto;
  padding: 0 16px;
}
</style>
